<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3.0初体验</title>
    <!-- 加载vue必须的js库 -->
    <script src="./js/vue/vue3.2.37.js"></script>

    <!-- 这里写vue组件样式代码 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .button{
            color: red;
            transition: all .3s;
        }
    </style>
</head>
<body>
    <!-- APP入口标签 -->
    <div id="app"></div>

    <!-- 在这里写你的js代码-->
    <script>

        const MyButton = {
            // vue3独有的，组合式api组件
            setup() {

                // 定义单独的响应式变量
                const liked = Vue.ref(false)
                const heights = Vue.ref(30)

                // 使用watch同步监听liked的变化
                Vue.watch(liked, async(v) => {
                    v?heights.value = 60:heights.value = 30
                })

                // 这里与vue2.0是同理 ，返回的jsx语法模板
                return () => Vue.h('button', {
                    class: 'button',
                    style:{
                        height: heights.value + 'px'
                    },
                    onClick:(e)=>{ 
                        liked.value = !liked.value
                    }
                },[String(liked.value)])
            }
        }
        
        // vue顶层组件，app入口
        Vue.createApp(MyButton).mount('#app')
    </script>

</body>
</html>